<!--
 * @Date         : 2023-11-20 15:09:05
 * @Description  : 轮播图组件
-->
<template>
  <view class="deco-banenr" :style="[innerStyle]">
    <view class="swiper-container">
      <swiper
        ref="swiper"
        class="swiper-wrap"
        :style="[swiperStyle]"
        next-margin="20rpx"
        :current="currentIndex"
        previous-margin="20rpx"
        autoplay
        circular
        :interval="data.data.autoplay * 1000"
        @change="handleSwiperChange"
      >
        <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item" @click="handleClickSwiper(item)">
          <view class="felx flex-1 px-5">
            <image class="swiper-item-image" :src="item.imageUrl" mode="scaleToFill" :style="[imageStyle]"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 指示器容器 -->
      <view v-if="list.length > 1" class="custom-indicator">
        <view v-for="(item, index) of list" :key="index" :class="['indicator', { active: index === currentIndex }]" @click="handleToSlide(index)"></view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { useDecoUnit, useStyle } from "@/decoration/utils/style"
// 广告弹窗类型字典 1 首页 2 影院列表 3 订单详情成功页面相关 4 icon广告
const BANNER_PAGE_TYPE = { index: "1", cinema: "2", orderFilmInfo: "3", orderGoodsInfo: "3", orderMallInfo: "3", orderRechargeInfo: "3", icon: "4" }
export default {
  name: "deco-banenr",
  mixins: [mixin],
  props: {
    page: { type: String, default: "index" }
  },
  data() {
    return {
      list: [],
      currentIndex: 0
    }
  },
  computed: {
    swiperStyle() {
      const style = {}
      style.height = useDecoUnit(this.data.data?.height)
      return useStyle(style)
    },
    imageStyle() {
      const style = {}
      style.height = useDecoUnit(this.data.data?.height)
      style.borderRadius = useDecoUnit(this.data.data?.radius)
      return useStyle(style)
    }
  },
  mounted() {
    this.init()
    this.handleGetBanner()
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleGetBanner()
        })
      }
    },
    async handleGetBanner() {
      const list = await uni.$api.banner.bannerList({ classification: BANNER_PAGE_TYPE[this.page] })
      if (list.length) {
        this.list = list.splice(0, 10)
        this.mitt?.emit("deco-top-background.setStyle", {
          background: `linear-gradient(180deg, ${this.list[0].navbarColor} 0%, rgba(255,255,255,0) 100%)`
        })
        this.mitt?.emit("deco-top-background.color", this.list[0].navbarColor)
      }
      if (this.$check.isEmpty(this.list)) {
        this.decoWrap?.hide()
      }
    },
    // 点击轮播图
    handleClickSwiper(info) {
      this.useAdJump(info)
    },
    handleSwiperChange({ detail }) {
      this.currentIndex = detail.current
      this.mitt?.emit("deco-top-background.setStyle", {
        background: `linear-gradient(180deg, ${this.list[detail.current].navbarColor} 0%, rgba(255,255,255,0) 100%)`
      })
      this.mitt?.emit("deco-top-background.color", this.list[detail.current].navbarColor)
    },
    handleToSlide(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-banenr {
  .swiper-container {
    position: relative;
  }
  .custom-indicator {
    display: flex;
    position: absolute;
    bottom: 14rpx;
    right: 48rpx;
    .indicator {
      width: 28rpx;
      height: 4rpx;
      margin-left: 8rpx;
      background: #ffffff;
      border-radius: 2rpx;
      opacity: 0.5;
    }
    .indicator.active {
      transition: all 1s ease;
      opacity: 1;
    }
  }
  .swiper-wrap {
    .swiper-item {
      display: flex;
      .swiper-item-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 16rpx;
        transition: all 0.3s ease;
      }
    }
  }
}
</style>
